<template>
    <span v-for="item in routeList" @click="to(item.path)">
        <span style="margin: 0 10px;" :class="{ 'active': item.isActive }">{{ item.title }}
            <template v-if="item.path !== '/home'">
                <span @click.stop="closeRoute(item.path)"><el-icon>
                        <CloseBold />
                    </el-icon></span>
            </template>

        </span>
    </span>
    <!-- <div @click="click1">1
        <div @click="click2">
            2
        </div>
    </div> -->
    <!-- </router-link> -->

</template>

<script  setup>
import { watch, reactive, computed } from 'vue';

import { Delete } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
import { useRoute } from 'vue-router'

const route = useRoute()
const router = useRouter()
const routeList = reactive([
    { title: 'home', path: '/home', isActive: true }
])
//跳转路由
const to = (path) => {
    console.log('to')
    router.push(path)
}
// 删除路由
const closeRoute = (path) => {
    console.log('close')
     const list = routeList.filter((item) =>
            item.path !== path
        )
        routeList.length = 0
        routeList.push(...list)
    //删除当前路由时取最后路由为选中的路由
    if (path === route.path) {
        // routeList.pop()
        router.push(routeList[routeList.length - 1].path)
        active()
    } else {
       
    }




}
// const click1 = () => {
//     console.log('click1')
// }
// const click2 = () => {
//     console.log('click2')
// }
watch(() => route.path,
    () => {
        console.log(route.path, 'route')
        console.log(route.meta, 'route')
        // 添加路由
        if (!routeList.find(item => item.path === route.path)) {
            routeList.push({ title: route.meta.title, path: route.path, isActive: false })
        }
        // 激活样式
        active()

        //    routeList.find(item => item.path === route.path) 
    })
// 激活样式
const active = () => {
    const list = routeList.map((item) => {
        if (item.path === route.path) {
            item.isActive = true
        } else {
            item.isActive = false
        }

        return item
    })
    routeList.length = 0
    routeList.push(...list)
}
</script>

<style lang="scss" scoped>
.active {
    background-color: #5DDAB4;
}
</style>